<template>
  <view>
    <!-- 没有添加任何商品的情况 -->
    <view class="goods-empty" v-if="goodsInfo.length === 0">
      <image src="../../static/empty.webp"></image>
      <text>空空如也~</text>
    </view>
    <view class="goods-content" v-else>
      <!-- 收货地址区域 -->
      <user-address></user-address>
      <view class="car-title">
        <uni-icons type="cart" size="20"></uni-icons>
        <text>购物车</text>
      </view>
      <uni-swipe-action>
        <view class="" v-for="(item,index) in goodsInfo" :key="index">
          <uni-swipe-action-item @click="bindClick(item)" :right-options="options">
            <goods-item :goods="item" showRadio @update-info="changeGoodsData"></goods-item>
          </uni-swipe-action-item>
        </view>
      </uni-swipe-action>
      <!--  结算区域 -->
      <user-settle></user-settle>
    </view>
  </view>
</template>

<script>
  import mixin from '@/mixin'
  import {
    mapMutations,
    mapGetters
  } from 'vuex'
  import {
    getGoodsInfo
  } from '@/common/storage.js'
  export default {
    mixins: [mixin],
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }],
        address: {}
      }
    },
    methods: {
      // ...mapMutations(['goodsCar/updateGoodsStatus']),
      ...mapMutations('goodsCar', ['updateGoodsStatus', 'delGoods']),
      // 接收子组件传过来的数据进行状态的修改
      changeGoodsData(goodsObj) {
        // 调用vuex中的方法修改商品的数据
        // this['goodsCar/updateGoodsStatus'](goodsObj)
        this.updateGoodsStatus(goodsObj)
        // this.setBudge()
      },
      // 滑动删除
      bindClick(goods) {
        // 点击确认，从vuex中删除数据
        this.delGoods(goods)
      }
    }
  }
</script>

<style lang="scss">
  .goods-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;

    image {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid #acd1d6;
      margin-bottom: 20px;
    }
  }

  .car-title {
    position: relative;
    display: flex;
    height: 40px;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;

    text {
      margin-left: 10px;
    }

    &::before {
      display: block;
      position: absolute;
      top: 0;
      content: '';
      width: 100%;
      height: 3px;
      background-image: url('../../static/cart_border@2x.png');
      background-size: 50%;
    }
  }

  .goods-content {
    padding-bottom: 40px;
  }
</style>
